<template>
    <h3 class="title">可折叠面版</h3>
    <div class="panel">
        <div class="head">
            <h4>自由与爱情</h4>
            <span class="btn" @click="func">{{ text }}</span>
        </div>
        <div class="body" v-show="flag">
            <p>生命诚可贵，</p>
            <p>爱情价更高。</p>
            <p>若为自由故，</p>
            <p>两者皆可抛。</p>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const flag = ref(true)
    const text = ref("收起")
    const func = () => {
        console.log('before:', flag, text)
        if(text.value == "收起") 
        {
            text.value = "展开"
            flag.value = false
        }
        else 
        {
            text.value = "收起"
            flag.value = true
        }
        console.log('after:', flag, text)
    }
</script>

<style>
    body{
        background-color: #ddd;
    }
    #app{
        width : 300px;
        height : 300px;
        padding: 1em 2em 2em;
        margin : 20px auto;
        border : 3px solid green;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
        h3{
            text-align: center;
        }
    }
    .panel{
        .head{
            display:flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 1em;
            margin : 0px;
            h4{
                margin: 0px;
                line-height: 2;
            }
            .btn{
                margin: 0px;
                cursor: pointer;
            }
        }
        .body{
            margin : 0px;
            border: 1px solid #ccc;
            padding: 0 1em;
            /* border-top: transparent; 错误的写法*/
            border-top-color: transparent;
        }
    }
</style>